<<<<<<< HEAD
<template>
  <div class="index_header">
    <div class="centre">
      <div class="huize_index">
        <div class="headr_left">
          <ul>
            <li>
              <i class="iconfont">&#xe614;</i>
              <span>微信</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
            <li>
              <i class="iconfont">&#xe63c;</i>
              <span>小程序</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
            <li>
              <i class="iconfont">&#xe638;</i>
              <span>APP 下载</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="header_right">
          <ul>
            <li>加盟代理</li>
            <li>新手教程</li>
            <li class="my_account_li" @click="MyAccount" v-if="login == 0">
              
              <span>我的账户</span>
              
            </li>
             <li class="my_account_li" v-if="login == 1">
              <img src="@/assets/img/px.jpg" />
              <span>我的账户</span>
              <div class="my_account" >
                <ul>
                  <li @click="openMy">我的高考信息</li>
                  <router-link  to="/Personal" tag="li">个人中心</router-link>
                  
                  <li @click="openPass">修改密码</li>
                  <li>退出登录</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="modeif_form" v-if="block">
      <div class="form" v-if="tyle == 0">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>修改密码</span>
        </div>
        <div class="Tips">请输入旧的密码</div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="number">
            <el-input v-model.number="ruleForm.number"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </div>
      </div>
      <div class="form" v-if="tyle == 1">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>修改密码</span>
        </div>
        <div class="Tips">请输入新的密码</div>
        <el-form
          :model="ruleForm"
          status-icon
          :rulesNwe="rulesNwe"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.passNwe" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="submitForm2('ruleForm')">完成</el-button>
        </div>
      </div>
      <div class="form" v-if="tyle == 2">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>我的高考信息</span>
        </div>
        <div class="my_center">
          <el-form
            :model="ruleForm"
            status-icon
            :rulesNwe="rulesNwe"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div class="from_center">
              <div class="top_center">高考省份</div>
              <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </div>
            <div class="from_center">
              <div class="top_center">选择科目</div>
              <div class="center_button">
                <el-button type="info" plain>理科</el-button>
                <el-button type="info" plain>文科</el-button>
                <el-button type="info" plain>综合</el-button>
              </div>
            </div>
            <div class="from_center">
              <div class="top_center">高考分数</div>
              <el-input v-model="input1" placeholder="请输入高考分数"></el-input>
            </div>
            <div class="from_center">
              <div class="top_center">高考排名</div>
              <el-input v-model="input2" placeholder="请输入高考排名"></el-input>
            </div>
          </el-form>
        </div>
        <div class="button">
          <el-button type="primary" @click="submitForm3('ruleForm')">确定修改</el-button>
        </div>
      </div>
    </div>

    <div class="modeif_form" v-if="block_my">
      <div v-if="tyle == 3">
        <div class="logon">
          <div class="left_img">
            <img src="@/assets/img/shui.jpg" alt />
          </div>
          <div class="right_logon">
            <div class="back-out">
              <i class="el-icon-close" @click="noneLogo"></i>
              <span>欢迎来到慧择云志愿</span>
            </div>
            <div class="password">
              <el-input
                placeholder="请输入手机号"
                maxlength  = 11
                v-model="input_password"
                
                prefix-icon="el-icon-mobile-phone"
                 clearable
              ></el-input>
            </div>
            <div class="logon_code">
              <el-input
                prefix-icon="el-icon-s-comment"
                placeholder="请输入验证码"
                v-model="input_code"              
              >
             
              </el-input>
              <div class="code_button"> 
                 <el-button type="text" @click="SendOut" v-if="codeSend">发送验证码</el-button>
                  <el-button type="text" v-if="codeStop" :loading="true" disabled>请等待 秒</el-button>
              </div>
              
            </div>
            <div class="reset">
              <div>
                手机号+密码登录
              </div>
              <div class="right">
                忘老密码？
              </div>
              </div>
            <div class="register"> 
              <el-button type="primary">登录/注册</el-button>
              <div class="register3">
                <span>
                  <i class="iconfont">&#xe90b;</i>
                </span>
                <span>
                  <i class="iconfont">&#xe60e;</i>
                </span>
                <span>
                  <i class="iconfont">&#xe63d;</i>
                </span>
              </div>
            
            </div>
            <div class="Agreement">
              登录即代表同意慧择云志愿 
              <span>
                用户协议
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ModigForm from "../Form/modifyForm";
export default {
  name: "Header",
  components: {
    ModigForm
  },

  data() {
    var checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账户不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value.length == 11) {
            callback(new Error("账号格式不对"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePassNwe = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.passNwe) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    
    return {
      block: false,
      block_my: false,
      login:"1",
      tyle: "0",
      input1: "",
      input2: "",
      input_password :"",
      input_code : "",
      codeSend: true,
      codeStop : false,
      ruleForm: {
        pass: "",
        checkPass: "",
        number: " ",
        passNwe: "",
        Province: "广东省"
      },
      sizeForm: {
        region: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        passNwe: [{ validator: validatePassNwe, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        number: [{ validator: checkNumber, trigger: "blur" }]
      },
      rulesNwe: {
        passNwe: [{ validator: validatePassNwe, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    MyAccount() {
      this.block_my = true;
      this.tyle = "3";
    },

    openPass() {
      this.block = true;
      this.tyle = "0";
    },
    openMy() {
      this.block = true;
      this.tyle = "2";
    },
    none() {
      this.tyle = "10";
      this.block = false;
    },
    noneLogo() {
      this.block = false;
      this.block_my = false;
      this.tyle = "10";
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("修改完成");
          this.pass = " ";
          this.number = " ";
          this.tyle = "1";
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("修改完成");

          (this.block = false), (this.tyle = "3");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    SendOut(){
      this.codeSend = false
      this.codeStop = true
    }

  }
};
</script>
<style lang="scss">
.index_header {
  width: 100%;
  height: 44px;
  background: #414141;
}
.huize_index {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;

  .headr_left {
    height: 100%;
    > ul {
      height: 100%;
      display: flex;
      line-height: 44px;

      li {
        margin-right: 10px;
        width: 160px;

        > i {
          margin-right: 12px;
          margin-top: 2px;
        }
        .hui_code {
          position: relative;
          padding: 24px;
          width: 112px;
          height: 112px;
          z-index: 100;
          border-radius: 6px;
          background: #fff;
          display: none;
          .img_code {
            img {
              width: 112px;
            }
          }
        }
      }
    }
    ul > li:hover div {
      display: block;
    }
  }
  .header_right {
    display: flex;
    > ul {
      height: 44px;
      display: flex;
      line-height: 44px;
      .my_account_li {
        position: relative;
        z-index: 100;
        .my_account {
          position: absolute;
          top: 44px;
          left: -36px;
          width: 128px;
          height: 146px;
          z-index: 10;
          border-radius: 6px;
          background: #fff;
          display: none;
          ul {
            padding: 24px 20px 30px 20px;
            line-height: 20px;
            li {
              cursor: pointer;
              margin: 0;
              margin: 5px 0;
              color: #414141;
              text-align: center;
            }
          }
        }
      }
      .my_account_li:hover .my_account {
        display: block;
      }
      li {
        display: flex;

        margin-left: 60px;
        img {
          display: block;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          margin: auto 10px;
        }
      }
    }
  }
}
.modeif_form {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: rgba($color: #000000, $alpha: 0.3);
  position: fixed;
  z-index: 500;
  .form {
    padding: 20px;
    margin: 0 auto;
    width: 400px;
    background: #ffffff;
    border-radius: 14px;
    margin-top: 70px;
    .from_center {
      margin: 16px;
    }
    .top_center {
      margin-bottom: 16px;
      color: #757575;
    }
    .center_button {
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 108px;
        margin: 0;
      }
      .el-button--info.is-plain:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #fff;
        outline: 0;
      }
      .el-button--info.is-plain:focus,
      .el-button--info.is-plain:hover {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #fff;
      }
    }
    .button {
      .el-button {
        width: 100%;
        margin: 68px 0;
      }
    }
    .back-out {
      line-height: 42px;

      .el-icon-close {
        font-size: 18px;
        color: #c8c8c8;
        margin-right: 10px;
      }
      span {
        color: #414141;
        font-size: 18px;
      }
    }
    .Tips {
      color: #2e86ff;
      font-size: 14px;
      margin-bottom: 44px;
    }

    .el-input__suffix {
      color: rgb(42, 226, 88);
    }
  }
}
.logon {
  width: 748px;
  margin: 0 auto;

  background: #ffffff;
  border-radius: 14px;
  margin-top: 70px;
  overflow: hidden;
  display: flex;
  div {
    flex: 1;
  }
  .left_img {
    height: 532px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right_logon {
    display: flex;

    flex-direction: column;
    background: #ffffff;
    >div {
      width: 312px;
      margin: 0 auto;
    }
    .back-out {
      margin-top: 46px;
      i {
        color: #c8c8c8;
        font-size: 16px;
      }
      span {
        padding-left: 40px;
        color: #414141;
        font-size: 16px;
      }
    }
    
    .logon_code{
      position: relative;
      .code_button{
        position: absolute;
        top: 0 ;
        right: 26px;
      }
    }
    .reset{
      display: flex;
     justify-content:space-between;
     color: #b1b1b1;
     font-size: 12px;
     .right{
        text-align: right;
     }
    }
    .register{
      .el-button{
        width: 100%;
      }
      .register3{
        display: flex;
        justify-content: space-around;
        margin-top:30px ;
        span{
          background: #c8c8c8;
          width: 32px;
          height: 32px;
          border-radius:50%;
          text-align: center;
          line-height: 32px;
          color: #fff;

        }
      }
    }
    .Agreement{
      color: #c8c8c8;
      font-size: 14px;
      text-align: center;
      
      line-height: 76px;
      span{
        color: #388cff;
      }
    }
  }
}
=======
<template>
  <div class="index_header">
    <div class="centre">
      <div class="huize_index">
        <div class="headr_left">
          <ul>
            <li>
              <i class="iconfont">&#xe614;</i>
              <span>微信</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
            <li>
              <i class="iconfont">&#xe63c;</i>
              <span>小程序</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
            <li>
              <i class="iconfont">&#xe638;</i>
              <span>APP 下载</span>
              <div class="hui_code">
                <div class="img_code">
                  <img
                    src="http://img0.imgtn.bdimg.com/it/u=509199280,2504080622&fm=26&gp=0.jpg"
                    alt
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="header_right">
          <ul>
            <li>加盟代理</li>
            <li>新手教程</li>
            <li class="my_account_li" @click="MyAccount" v-if="login == 0">
              
              <span>我的账户</span>
              
            </li>
             <li class="my_account_li" v-if="login == 1">
              <img src="@/assets/img/px.jpg" />
              <span>我的账户</span>
              <div class="my_account" >
                <ul>
                  <li @click="openMy">我的高考信息</li>
                  <router-link  to="/Personal" tag="li">个人中心</router-link>
                  
                  <li @click="openPass">修改密码</li>
                  <li>退出登录</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="modeif_form" v-if="block">
      <div class="form" v-if="tyle == 0">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>修改密码</span>
        </div>
        <div class="Tips">请输入旧的密码</div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="number">
            <el-input v-model.number="ruleForm.number"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </div>
      </div>
      <div class="form" v-if="tyle == 1">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>修改密码</span>
        </div>
        <div class="Tips">请输入新的密码</div>
        <el-form
          :model="ruleForm"
          status-icon
          :rulesNwe="rulesNwe"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.passNwe" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="submitForm2('ruleForm')">完成</el-button>
        </div>
      </div>
      <div class="form" v-if="tyle == 2">
        <div class="back-out">
          <i class="el-icon-close" @click="none"></i>
          <span>我的高考信息</span>
        </div>
        <div class="my_center">
          <el-form
            :model="ruleForm"
            status-icon
            :rulesNwe="rulesNwe"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div class="from_center">
              <div class="top_center">高考省份</div>
              <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </div>
            <div class="from_center">
              <div class="top_center">选择科目</div>
              <div class="center_button">
                <el-button type="info" plain>理科</el-button>
                <el-button type="info" plain>文科</el-button>
                <el-button type="info" plain>综合</el-button>
              </div>
            </div>
            <div class="from_center">
              <div class="top_center">高考分数</div>
              <el-input v-model="input1" placeholder="请输入高考分数"></el-input>
            </div>
            <div class="from_center">
              <div class="top_center">高考排名</div>
              <el-input v-model="input2" placeholder="请输入高考排名"></el-input>
            </div>
          </el-form>
        </div>
        <div class="button">
          <el-button type="primary" @click="submitForm3('ruleForm')">确定修改</el-button>
        </div>
      </div>
    </div>

    <div class="modeif_form" v-if="block_my">
      <div v-if="tyle == 3">
        <div class="logon">
          <div class="left_img">
            <img src="@/assets/img/shui.jpg" alt />
          </div>
          <div class="right_logon">
            <div class="back-out">
              <i class="el-icon-close" @click="noneLogo"></i>
              <span>欢迎来到慧择云志愿</span>
            </div>
            <div class="password">
              <el-input
                placeholder="请输入手机号"
                maxlength  = 11
                v-model="input_password"
                
                prefix-icon="el-icon-mobile-phone"
                 clearable
              ></el-input>
            </div>
            <div class="logon_code">
              <el-input
                prefix-icon="el-icon-s-comment"
                placeholder="请输入验证码"
                v-model="input_code"              
              >
             
              </el-input>
              <div class="code_button"> 
                 <el-button type="text" @click="SendOut" v-if="codeSend">发送验证码</el-button>
                  <el-button type="text" v-if="codeStop" :loading="true" disabled>请等待 秒</el-button>
              </div>
              
            </div>
            <div class="reset">
              <div>
                手机号+密码登录
              </div>
              <div class="right">
                忘老密码？
              </div>
              </div>
            <div class="register"> 
              <el-button type="primary">登录/注册</el-button>
              <div class="register3">
                <span>
                  <i class="iconfont">&#xe90b;</i>
                </span>
                <span>
                  <i class="iconfont">&#xe60e;</i>
                </span>
                <span>
                  <i class="iconfont">&#xe63d;</i>
                </span>
              </div>
            
            </div>
            <div class="Agreement">
              登录即代表同意慧择云志愿 
              <span>
                用户协议
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ModigForm from "../Form/modifyForm";
export default {
  name: "Header",
  components: {
    ModigForm
  },

  data() {
    var checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账户不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value.length == 11) {
            callback(new Error("账号格式不对"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePassNwe = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.passNwe) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    
    return {
      block: false,
      block_my: false,
      login:"1",
      tyle: "0",
      input1: "",
      input2: "",
      input_password :"",
      input_code : "",
      codeSend: true,
      codeStop : false,
      ruleForm: {
        pass: "",
        checkPass: "",
        number: " ",
        passNwe: "",
        Province: "广东省"
      },
      sizeForm: {
        region: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        passNwe: [{ validator: validatePassNwe, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        number: [{ validator: checkNumber, trigger: "blur" }]
      },
      rulesNwe: {
        passNwe: [{ validator: validatePassNwe, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    MyAccount() {
      this.block_my = true;
      this.tyle = "3";
    },

    openPass() {
      this.block = true;
      this.tyle = "0";
    },
    openMy() {
      this.block = true;
      this.tyle = "2";
    },
    none() {
      this.tyle = "10";
      this.block = false;
    },
    noneLogo() {
      this.block = false;
      this.block_my = false;
      this.tyle = "10";
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("修改完成");
          this.pass = " ";
          this.number = " ";
          this.tyle = "1";
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("修改完成");

          (this.block = false), (this.tyle = "3");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    SendOut(){
      this.codeSend = false
      this.codeStop = true
    }

  }
};
</script>
<style lang="scss">
.index_header {
  width: 100%;
  height: 44px;
  background: #414141;
}
.huize_index {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;

  .headr_left {
    height: 100%;
    > ul {
      height: 100%;
      display: flex;
      line-height: 44px;

      li {
        margin-right: 10px;
        width: 160px;

        > i {
          margin-right: 12px;
          margin-top: 2px;
        }
        .hui_code {
          position: relative;
          padding: 24px;
          width: 112px;
          height: 112px;
          z-index: 100;
          border-radius: 6px;
          background: #fff;
          display: none;
          .img_code {
            img {
              width: 112px;
            }
          }
        }
      }
    }
    ul > li:hover div {
      display: block;
    }
  }
  .header_right {
    display: flex;
    > ul {
      height: 44px;
      display: flex;
      line-height: 44px;
      .my_account_li {
        position: relative;
        z-index: 100;
        .my_account {
          position: absolute;
          top: 44px;
          left: -36px;
          width: 128px;
          height: 146px;
          z-index: 10;
          border-radius: 6px;
          background: #fff;
          display: none;
          ul {
            padding: 24px 20px 30px 20px;
            line-height: 20px;
            li {
              cursor: pointer;
              margin: 0;
              margin: 5px 0;
              color: #414141;
              text-align: center;
            }
          }
        }
      }
      .my_account_li:hover .my_account {
        display: block;
      }
      li {
        display: flex;

        margin-left: 60px;
        img {
          display: block;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          margin: auto 10px;
        }
      }
    }
  }
}
.modeif_form {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: rgba($color: #000000, $alpha: 0.3);
  position: fixed;
  z-index: 500;
  .form {
    padding: 20px;
    margin: 0 auto;
    width: 400px;
    background: #ffffff;
    border-radius: 14px;
    margin-top: 70px;
    .from_center {
      margin: 16px;
    }
    .top_center {
      margin-bottom: 16px;
      color: #757575;
    }
    .center_button {
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 108px;
        margin: 0;
      }
      .el-button--info.is-plain:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #fff;
        outline: 0;
      }
      .el-button--info.is-plain:focus,
      .el-button--info.is-plain:hover {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #fff;
      }
    }
    .button {
      .el-button {
        width: 100%;
        margin: 68px 0;
      }
    }
    .back-out {
      line-height: 42px;

      .el-icon-close {
        font-size: 18px;
        color: #c8c8c8;
        margin-right: 10px;
      }
      span {
        color: #414141;
        font-size: 18px;
      }
    }
    .Tips {
      color: #2e86ff;
      font-size: 14px;
      margin-bottom: 44px;
    }

    .el-input__suffix {
      color: rgb(42, 226, 88);
    }
  }
}
.logon {
  width: 748px;
  margin: 0 auto;

  background: #ffffff;
  border-radius: 14px;
  margin-top: 70px;
  overflow: hidden;
  display: flex;
  div {
    flex: 1;
  }
  .left_img {
    height: 532px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right_logon {
    display: flex;

    flex-direction: column;
    background: #ffffff;
    >div {
      width: 312px;
      margin: 0 auto;
    }
    .back-out {
      margin-top: 46px;
      i {
        color: #c8c8c8;
        font-size: 16px;
      }
      span {
        padding-left: 40px;
        color: #414141;
        font-size: 16px;
      }
    }
    
    .logon_code{
      position: relative;
      .code_button{
        position: absolute;
        top: 0 ;
        right: 26px;
      }
    }
    .reset{
      display: flex;
     justify-content:space-between;
     color: #b1b1b1;
     font-size: 12px;
     .right{
        text-align: right;
     }
    }
    .register{
      .el-button{
        width: 100%;
      }
      .register3{
        display: flex;
        justify-content: space-around;
        margin-top:30px ;
        span{
          background: #c8c8c8;
          width: 32px;
          height: 32px;
          border-radius:50%;
          text-align: center;
          line-height: 32px;
          color: #fff;

        }
      }
    }
    .Agreement{
      color: #c8c8c8;
      font-size: 14px;
      text-align: center;
      
      line-height: 76px;
      span{
        color: #388cff;
      }
    }
  }
}
>>>>>>> 90b9d8831b5aef084167e4af148d7d7687c3af1d
</style>